<template>
	<!--规格单位sku绑定图片 -->
	<view class="item-info" :class="openShow === 0 ? 'none' : openShow === 1 ? 'show' : ''">
		<view class="cate-content">
			<view class="item-fixed-top">
				<view class="title">选择规格单位</view>
				<view class="close" @click="close">
					<image src="../../static/images/close.png" mode="scaleToFill"></image>
				</view>
			</view>
					
			<!-- 规格单位 -->
			<view class="flow-c">
				<view class="cate-list comm-list">
					<view class="r-flow-box" v-for="(item,idx) in list" :key="idx">
						<view class="t-txt" @click="itemClicks(item)" :class="item.checked ? 's-c' : ''">{{item.title}}</view>
						<text class="icon-font sele-icon" v-if="item.checked">&#xe636;</text>
					</view>
				</view>
				<view class="btn" @click="submit">确 定</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import lang from "../../js/conf/Lang.js";
	import https from "../../js/https/Https.js";
	export default {
		data() {
			return {
				openShow : 0,
				list : [],
				
				index : -1, //图片索引
			};
		},
		methods: {
			/**流水记录***/
			show(type,data) 
			{
				let timer = type === 'show' ? 10 : 200;
				let state = type === 'show' ? 1 : 0;
				this.openShow = 2;
				setTimeout(() => {
					this.openShow = state;
				}, timer);
				if(!type)return;
				this.list = [];
				this.index = data.index;
				this.list = data.list;
			},
			
			/***选中/取消****/
			itemClicks(items)
			{
				items.checked = !items.checked;
				this.$forceUpdate();
			},
			
			/*******更新未付款*****/
			submit()
			{
				let data = {};
				data.index = this.index;
				let seleIds = "";
				let seleTits = "";
				let seletits_s = "";
				let arr = [];
				for(let i = 0; i < this.list.length; i++)
				{
					let temp = this.list[i];
					if(temp.checked)
					{
						if(seleIds == "")
						{
							seleIds = temp.id;
						}
						else
						{
							seleIds = seleIds + "," + temp.id;
						}
						
						if(seleTits == "")
						{
							seleTits = temp.title;
						}
						else
						{
							seleTits = seleTits + "," + temp.title;
						}
						arr.push(temp);
					}
				}
				data.list = arr;
				// console.log("submit()：seleIds=========:",seleIds);
				// let sArr = seleIds.split("|");
				// seleIds = sArr[sArr.length - 1]; 
				data.seleIds = seleIds;
				data.seleTits = seleTits;
				data.seletits_s = seletits_s;
				
				console.log("submit()：data.seleIds=========:",data.seleIds);
				
				this.$emit("setSkuImg",data);
				this.close();
			},
			
			/*****关闭****/
			close()
			{
				this.show();
			},
		},
	}
</script>
<style lang="scss">
	.flow-c
	{
		.cate-list
		{
			height: 500px;
			.r-flow-box
			{
				width: 100%;
				cursor: pointer;
				font-size: 14px;
				color: #666;
				border-bottom: 1px solid #eee;
				display: flex;
				align-items: center;
				background-color: #fff;
				padding-top: 4px;
				padding-bottom: 4px;
				position: relative;
				.t-txt
				{
					line-height: 30px;
					width: 360px;
					padding-left: 10px;
					padding-right: 30px;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				
				.sele-icon
				{
					color: #3388ff;
					font-size: 30px;
					position: absolute;
					right: 0px;
				}
				
				.s-c
				{
					color: #3388ff;	
				}
			}
			.r-flow-box:last-child
			{
				border-bottom : none;
			}
		}
		.btn
		{
			width: 100%;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #3388FF;
			color: #FFF;
			font-size: 16px;
			z-index: 999;
			cursor: pointer;
		}
		
		.btn:hover
		{
			background: #2d79e3;
		}
	}
</style>